<template>
	<view>
		<view class="queBot">
			<!-- 提交 -->
			<button class="comBtn" :class="[currPage == 'studyPage' ? 'spec' : '']"  :loading="isDisableFlag" :disabled="isDisableFlag" @tap="submitQueRes" v-if="completeStatus == 0">{{btnTit}}</button>
			<template v-if="!lastQueFlag">
				<!-- 下一题 -->
				<button class="comBtn" :class="[currPage == 'studyPage' ? 'spec' : '']"  :loading="isDisableFlag" :disabled="isDisableFlag" @tap="goNextQue" v-if="completeStatus == 1">{{btnTit}}</button>
			</template>
			<template v-else>
				<!-- 做完了 -->
				<button class="comBtn" :class="[currPage == 'studyPage' ? 'spec' : '']"  :loading="isDisableFlag" :disabled="isDisableFlag" v-if="completeStatus == 1" @tap="lastSubmitQueRes">{{btnTit}}</button>
			</template>
			<view class="botItemWrap">
				<view class="botItem"> 
					<view class="queNum rightAns">{{ansRightNum}}</view>
					<view class="itemTit">答对</view>
				</view>
				<view class="botItem">
					<view class="queNum errorAns">{{ansErrNum}}</view>
					<view class="itemTit">答错</view>
				</view>
				<view class="botItem" @tap="showQueCard">
					<view><text class="currQueNum">{{currIndex}}</text><text class="totalNum">/{{queLen}}</text></view>
					<view class="itemTit"><text class="iconfont icon-caidan"></text>答题卡</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currPage:String,
			btnTit:String,
			ansRightNum:Number,
			ansErrNum:Number,
			currIndex:Number,
			queLen:Number,
			isDisableFlag:Boolean,
			completeStatus:Number,
			lastQueFlag:Boolean
		},
		methods:{
			submitQueRes(){
				this.$emit('submitQueRes')
			},
			goNextQue(){
				this.$emit('goNextQue')
			},
			lastSubmitQueRes(){
				this.$emit('lastSubmitQueRes')
			},
			showQueCard(){
				this.$emit('showQueCard')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.queBot{
		height: 110rpx; 
		width: 100%;
		box-shadow: 0 -5rpx 8rpx rgba(0,0,0,.02);
		display: flex;
		align-items: center;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0rpx;
		z-index: 100; 
		.botItemWrap{
			flex: 1;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			.botItem{
				width: 33%;
				text-align: center;
				color: $pss-text-color3;
				@include respTo(phone){
					font-size: $font-size34; 
				}
				@include respTo(pad){
					font-size: $padSize22; 
				}
				.itemTit,
				.totalNum{
					color: $pss-text-colora;
					@include respTo(phone){
						font-size: $font-size26; 
					}
					@include respTo(pad){
						font-size: $padSize20; 
					}
				}
				.queNum{
					font-weight: bold;
					&.rightAns{
						color: $pss-color-green;
					}
					&.errorAns{
						color: $pss-color-red;
					}
				}
				.icon-caidan{
					margin-right: 5rpx;
					@include respTo(phone){
						font-size: $font-size26; 
					}
					@include respTo(pad){
						font-size: $padSize20; 
					}
				}
			}
		}
		.comBtn{
			width: 340rpx;
			margin-left: 30rpx;
			@include respTo(phone){
				height: 76rpx;
				line-height: 76rpx;
				font-size: $font-size32; 
			}
			@include respTo(pad){
				height: 70rpx;
				line-height: 70rpx;
				font-size: $padSize24; 
			}
			&.spec{
				background: $pss-color-green;
			}
		}
	}
</style>